<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #goodList{
      border: solid;
    }
    tr{
      border: solid;
    }
    td{
      border: solid;
    }
  </style>
</head>
<body>
      <table id="goodList">
        <caption>商品列表</caption>
        <tr>
          <th>商品标题</th>
          <th>商品价格</th>
          <th>商品库存</th>
        </tr>
      </table>
      <script>
          let productArr=[
            {
              title:"华为Mate60",
              price:8000,
              num:200
            },
            {
              title:"小米14",
              price:5000,
              num:1000
            },
            {
              title:"苹果15",
              price:10000,
              num:900
            },
            {
              title:"OPPO reno11",
              price:2900,
              num:10
            }
          ];
          let tables = document.getElementById("goodList");
          for (let good of productArr){
            let row = document.createElement('tr');
            let title = document.createElement('td');
            let price = document.createElement('td')
            let num = document.createElement('td');
            title.innerHTML=good.title;
            price.innerHTML=good.price;
            num.innerHTML=good.num;
            row.append(title,price,num);
            tables.append(row);
          }
      </script>
</body>
</html>